<template>
  <div class="usedtime-page page">
    <el-form label-position="left" inline label-suffix=":" size="small" label-width="80px" style="padding-left:6px">
      <el-form-item label="选择时间">
        <el-date-picker v-model="dataTime" type="daterange" range-separator="~" start-placeholder="开始日期" value-format="yyyy-MM-dd"
          clearable end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="getData">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="chart-box">
      <div id="main" ref="chart" style="width: 100%;height:600px;"></div>
    </div>
  </div>
</template>
           
<script>
import { usedtimesStatistics } from "@/api/user";
export default {
  data() {
    return {
      mychart: null,
      Xios: [],
      dataNum: [],
      singNum: [],
      dataTime: [],
      searchForm: {
        begintime: '',
        endtime: ''
      }
    }
  },
  watch: {
    dataTime(n) {
      console.log(n);
      if (n) {
        this.searchForm.begintime = n[0]
        this.searchForm.endtime = n[1]
      } else {
        this.searchForm.begintime = ''
        this.searchForm.endtime = ''
      }
    }
  },
  mounted() {
    this.mychart = this.$echarts.init(document.getElementById('main'));
    this.getData()
  },
  methods: {
    // getData() {
    //   this.Xios = ['测试', '测试', '测试', '测试', '测试', '测试', '测试', '测试']
    //   this.dataNum = [14, 0, 0, 2, 13, 7, 8, 90]
    //   this.singNum = [12, 0, 0, 1, 12, 5, 5, 55]
    //   this.draw()
    // },
    async getData() {
      const res = await usedtimesStatistics.post(this.searchForm);
      if (res.resultCode === "000000") {
        console.log(res);
        const { empList, signCounts, moneyCounts } = res.data
        this.Xios = empList
        this.dataNum = signCounts
        this.singNum = moneyCounts
        this.draw()
      } else {
        this.$message.error(res.resultInfo);
      }
    },
    getOptions() {
      return {
        title: {
          text: '消课情况统计'
        },
        tooltip: {
          trigger: 'axis',
          showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: 50,
          right: 100,
          bottom: 100,
          top: 100
        },
        xAxis: {
          data: this.Xios,
          name: '  老师（学生数）',
          axisLabel: {
            interval: 0
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '课程数量(节)'
          },
          {
            type: 'value',
            name: '消课金额(元)'
          },
        ],
        series: this.getSeries()
      }
    },
    getSeries() {
      const seies = [
        {
          name: '课程数量(节)',
          type: 'bar',
          data: this.dataNum,
          barWidth: 50,//柱图宽度
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#800080'
                }
              },
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#f2f5d0'
                // color: '#f2f5d0'
              }, {
                offset: 1,
                color: '#f9957f'
                // color: '#aebaf8'
              }])
            }
          },
        },
        {
          name: '消课金额(元)',
          type: 'bar',
          data: this.singNum,
          barWidth: 50,//柱图宽度
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#800080'
                }
              },
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#aebaf8'
              }, {
                offset: 1,
                color: '#f9957f'
              }])
            }
          },
        }
      ]
      return seies
    },
    draw() {
      this.mychart.setOption(this.getOptions());
    }
  }
}
</script>
<style lang='scss'>
.usedtime-page {
  width: 100%;
  .chart-box {
    margin-top: 20px;
  }
}
</style>